<template>
  <div class="market-add-main">
    <NavigationBarBack title="新建任务" />
    <el-form ref="form" :model="form" label-width="120px" size="small" class="market-add-body" label-position="right">
      <div class="config-tips">
        <el-alert type="warning" :closable="false">
          <div slot="title" style="font-size: 14px;line-height: 22px;color: rgba(0,0,0,.85);display: flex;">
            <svg-icon icon-class="warning-circle-fill-yellow"
              style="font-size: 16px;margin-top: 4px;margin-right: 8px;"></svg-icon>
            <div>
              【批量群邀请】核心是满足“把一个人批量拉进多个群”的需求，如需“把多个人批量拉进一个群”请使用<span style="color: #3070ff;">【批量拉群】</span>
            </div>
          </div>
        </el-alert>
      </div>
      <div class="config-box">
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">基础信息</div>
          </div>
          <div class="card-content">
            <el-form-item label="任务标题：">
              <el-input type="text" placeholder="请输入任务标题，最长15个字" v-model="form.title" maxlength="15" show-word-limit
                style="width: 400px;" />
            </el-form-item>
            <el-form-item v-if="!single" label="下发企微号：" prop="pass">
              <el-select v-model="form.company" placeholder="请选择" size="small" style="width: 270px;margin-right: 8px;">
                <el-option v-for="item in company" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <el-button plain icon="el-icon-plus" size="small" @click="handleAddEchat">选择企微号</el-button>
            </el-form-item>
            <el-form-item label="拉群对象：" prop="pass">
              <el-button plain icon="el-icon-plus" size="small" :disabled='!single' @click="handleClient">添加客户</el-button>
              <el-button plain icon="el-icon-plus" size="small"  @click="handleEchat">添加企业成员</el-button>
              <span style="margin-left: 12px;">0/40</span>
            </el-form-item>
            <el-form-item label="目标群：" prop="pass">
              <el-select v-model="form.formGroup" placeholder="请选择">
                <el-option label="直接选择（单号配置可用）" :value="1" :disabled='!single' />
                <el-option label="按条件选择" :value="2" />
                <!-- <el-option v-for="item in groupList" :key="item.value" :label="item.label" :disabled="item.isDisable"
                  :value="item.value">
                </el-option> -->
              </el-select>
              <el-button v-if="form.formGroup==1" icon="el-icon-plus" @click="handleGroup" class="ml-12">选择添加</el-button>
              <div v-if="form.formGroup==2" class="condition-box">
                <div class="header-tip">满足以下条件：</div>
                <div class="condition-item">
                  <label>关键词：</label>
                  <div class="flex-rows">
                    <el-select size="small">
                      <el-option v-for="item in keyWords" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                    <el-input placeholder="可输入多个，按enter确认" v-model="input3" size="small">
                      <el-button slot="append" icon="el-icon-plus" size="small"></el-button>
                    </el-input>
                  </div>
                </div>
                <div class="condition-item">
                  <label>群标签：</label>
                  <div class="flex-rows">
                    <el-select size="small">
                      <el-option v-for="item in keyTags" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                    <MultipleSelect size="small" placeholder='智能标签' :receiverNameOpt='lableOpt' width="240px" />
                  </div>
                </div>
                <div class="condition-item">
                  <label>身份权限：</label>
                  <el-select placeholder="请选择" size="small" style="width: 140px;">
                    <el-option v-for="item in leader" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </div>
                <div class="condition-item">
                <label>群人数：</label>
                <el-dropdown placement="bottom">
                  <el-input class="search-input" size="small" suffix-icon="el-icon-arrow-down"  style="width: 140px;"/>
                  <el-dropdown-menu slot="dropdown">
                    <div class="threshold-content">
                      <div class="input-rows">
                        <el-input placeholder="最小值" style="width: 88px"/>
                        <span class="delimiter">~</span>
                        <el-input placeholder="最大值" style="width: 88px"/>
                      </div>
                      <el-button class="submit-button" type="primary" size="small">确定</el-button>
                    </div>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">
              入群前引导语
              <el-switch v-model="form.switch"  size="small" style="margin-left: 10px;"/>
              <span style="margin-left: 12px;color: rgba(0, 0, 0, 0.45);font-size: 12px;font-weight: 400;">
                客户群人数少于40人直接拉群；40人后若开启引导语，会先发送引导语，再发送邀请链接
              </span>
            </div>
          </div>
          <div class="card-content">
            <material-content ref="material" />
          </div>
        </div>
      </div>
    </el-form>
    <div class="footerpage bg_fff flexcenter">
      <el-button type="primary" size="small">确定创建</el-button>
      <el-button size="small">取消创建</el-button>
    </div>
    <!-- 选择企微号 -->
    <SelectWechat
      v-if="showEwechat"
      :visableIf.sync="showEwechat"
      width="670px"
      :showRecord='false'
      :showWarning='true'
    />
    <!-- <div></div> -->
    <!-- 选择客户群 -->
    <SelectClientGroupDrawer
      v-if="showgroup"
      width="860px"
      :showRight="false"
      :visable.sync="showgroup"
    />

    <!-- 添加客户 -->
    <SelectClient
      v-if="showclient"
      :visable.sync="showclient"
      width="800px"
      height="500px"
    />

    <!-- 添加企业成员 -->
    <EwechatUser
      v-if="showEchat"
      :visable.sync="showEchat"
      :showremark="false"
      placeholder="搜索成员的姓名、实名"
    />
  </div>
</template>
<script>
import NavigationBarBack from '@/components/NavigationBarBack'
import MaterialContent from "@/components/MaterialContent";
import MultipleSelect from '@/components/MultipleSelect'
import SelectClientGroupDrawer from "@/components/UserGroupComp/SelectClientGroupDrawer";
import SelectClient from "@/components/UserGroupComp/SelectClient";
import EwechatUser from "@/components/UserGroupComp/EwechatUser";
import SelectWechat from "@/components/UserGroupComp/SelectWechat.vue";
export default {
  data() {
    return {
      single:false,//是否是单号模式
      form: {
        title: '',
        group: 0,
        company: 1,
        customer: 0,
        customerGroup: 0,
        checkRadio: 0,
        sendTime: 3,
        isEnd: false,
        formGroup: 2
      },
      company: [{
        value: 1,
        label: '志新'
      }, {
        value: 2,
        label: '锐安'
      }],
      groupList: [
        { label: '直接选择（单号配置可用）', value: 1, isDisable: true },
        { label: '按条件选择', value: 2, isDisable: false },
      ],
      keyWords: [
        { id: 1, name: '含任意关键词' },
        { id: 2, name: '含所有关键词' },
      ],
      keyTags: [
        { id: 1, name: '含任意标签' },
        { id: 2, name: '含所有标签' },
        { id: 3, name: '未打任何标签' },
      ],
      lableOpt: [
        { value: 1, label: '客户等级', children: ['一般', '重要', '核心'] },
        { value: 2, label: '客户等级2', children: ['一般2', '重要2', '核心2'] }
      ],
      leader: [
        { id: 1, name: '群主/群管理员' },
        { id: 2, name: '群主' },
        { id: 3, name: '群成员' },
      ],
      showModel: false,
      showgroup:false,
      showclient:false,
      showEchat: false,
      showEwechat:false
    }
  },
  components: {
    NavigationBarBack,
    MaterialContent,
    MultipleSelect,
    SelectClientGroupDrawer,
    SelectClient,
    EwechatUser,
    SelectWechat
  },
  created(){
    if(this.$route.name=='SingleMulitInviteAdd'){
      this.single = true
    }else{
      this.single = false
    }
  },
  methods: {
    showBox(){
      this.showModel = !this.showModel
    },

    handleAddEchat(){
      this.showEwechat = true
    },

    handleGroup(){
      this.showgroup = true
    },

    handleClient(){
      this.showclient = true
    },

    handleEchat(){
      this.showEchat = true
    }
  },
}
</script>
<style lang="scss" scoped>
.market-add-main {
  height: 100%;
  overflow: auto;
  flex: 1 1;
  position: relative;

  .market-add-body {
    min-height: calc(100% - 46px - 56px);
    .config-box {
      margin: 0 auto;
      width: 1000px;
      display: flex;
      flex-direction: column;
      padding-bottom: 26px;

      .config-settig-card {
        background: #ffffff;
        margin-top: 12px;
        flex: 1 1;
        text-align: left;
        text-align: initial;
        color: rgba(0, 0, 0, 0.85);
        border-radius: 4px;
        background: #fff;
        font-size: 14px;

        .card-head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #e9e9e9;

          .card-title {
            padding: 16px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
            display: flex;
            align-items: center;
          }

          .tips-text {
            display: block;
            color: rgb(47, 84, 235);
            cursor: pointer;
            font-size: 12px;
            font-weight: 400;
            margin-right: 20px;
          }
        }

        .card-content {
          padding: 20px 20px 20px 12px;
          font-size: 14px;
          line-height: 22px;

          .condition-box {
            width: 600px;
            background-color: #f7f7f7;
            padding: 16px;
            border-radius: 4px;
            margin-top: 12px;

            .header-tip {
              display: block;
              font-size: 12px;
              color: rgba(0, 0, 0, .45);
              line-height: 20px;
              margin-bottom: 16px;
            }
            .condition-item {
              display: flex;
              align-items: center;
              line-height: 32px;
              margin-bottom: 10px;
              label {
                width: 86px;
                font-weight: 400;
                color: rgba(0, 0, 0, .85);
              }
              .flex-rows {
                display: grid;
                column-gap: 6px;
                grid-template-columns: 140px 320px;
                align-items: center;
                position: relative;
              }
              &:nth-child(3) {
                .flex-rows {
                  grid-template-columns: 128px 320px;
                }
              }
              .group-wrap {
                position: relative;
                .group-input {
                  width: 140px;
                }
                .group-content {
                  min-width: 240px;
                  position: absolute;
                  top: 36px;
                  overflow: hidden;
                  font-size: 14px;
                  font-variant: normal;
                  background-color: #fff;
                  border-radius: 4px;
                  outline: none;
                  padding: 16px;
                  box-shadow: 0 2px 8px rgba(0,0,0,.15);
                  &.show {
                    display: block;
                  }
                  &.hide {
                    display: none;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

::v-deep .el-form-item .el-form-item {
  margin-bottom: 16px;
}

::v-deep .el-input-group__append {
  padding: 0 10px;
}
</style>
<style>
.threshold-content {
  padding: 12px;
}
.input-rows {
  display: flex;
  align-items: center;
}
.input-rows .delimiter {
  margin: 0 8px;
  font-size: 14px;
  color: rgba(0,0,0,.25);
}
.threshold-content .submit-button {
  width: 100%;
  margin-top: 12px;
}
.tags-dropdown {
  width: 450px;
  font-size: 14px;
  font-weight: 400;
}
.tags-dropdown .dropdown-head{
  padding: 12px 16px;
  border-bottom: 1px solid #e9e9e9;
}
.dropdown-body {
  padding: 12px;
}
.dropdown-body .tag-record {
  margin-top: 16px;
}
.tag-record .tag-head {
  font-size: 12px;
  color: #666;
}
.tag-record .tags-item {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  column-gap: 8px;
  row-gap: 8px;
  text-align: center;
}
.tags-item .tag {
  margin-bottom: 8px;
  margin-right: 8px;
  font-size: 14px;
  padding: 5px 12px;
  background: rgba(0, 0, 0, .06);
  border-radius: 2px;
}
.tags-item .active {
  background-color: #2f54eb;
  color: #fff;
}
.dropdown-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f5f5f5;
  padding: 10px 16px;
  border-top: 1px solid #e9e9e9;
}
.dropdown-footer .unkown-button {
  color: #3070ff;
  border: 1px solid #3070ff;
  border-radius: 4px;
  text-shadow: none;
  font-size: 14px;
  line-height: 22px;
  width: 88px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footerpage{
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
}
</style>